<template>
  <h1 class="row-title">第一组</h1>
  <div class="row">
    <!-- 卡片一 -->
    <Lgm-Card
      :img-src="global.kfc"
      summary="肯德基（KFC），是美国跨国连锁餐厅之一，也是世界第二大速食及最大炸鸡连锁企业"
    />
    <!-- 卡片二 -->
    <Lgm-Card
      :img-src="global.mdl"
      summary="麦当劳（McDonald's）是全球大型跨国连锁餐厅，主要售卖汉堡包，以及薯条、炸鸡、汽水、冰品、沙拉、水果等快餐食品。"
    >
      <!-- 插槽内部的内容样式由用户自己决定 -->
      <template #footer>
        <div class="footer">
          <div class="level">中级 · 5225人报名</div>
          <div class="price">￥399.00</div>
        </div>
      </template>
    </Lgm-Card>
    <!-- 卡片三 -->
    <Lgm-Card :img-src="global.hls" summary="华莱士（喷射战士）" />
  </div>
  <h1 class="row-title">第二组</h1>
  <div class="row">
    <Lgm-Card :img-src="global.tst" :width="368" :img-height="220">
      <div>
        福州塔斯汀餐饮管理有限公司于2017年12月15日成立，
        旗下品牌塔斯汀是一个主营中国汉堡的餐饮连锁品牌，面向具备个性主张、独特审美、独立意识的年轻受众体
      </div>
      <!-- 插槽内部的内容样式由用户自己决定 -->
      <template #footer>
        <div class="footer-java">
          <div class="level">3步骤 · 3门课</div>
          <div class="level">10982收藏</div>
        </div>
      </template>
    </Lgm-Card>
  </div>
</template>

<script setup>
const global = {
  kfc: new URL('@/assets/imgs/kfc.jpg', import.meta.url).href,
  mdl: new URL('@/assets/imgs/mdl.jpg', import.meta.url).href,
  tst: new URL('@/assets/imgs/tst.jpg', import.meta.url).href,
  hls: new URL('@/assets/imgs/hls.jpg', import.meta.url).href
}
</script>

<style lang="scss" scoped>
.row {
  width: 1200px;
}
.footer {
  padding: 0 8px;
  font-size: 12px;
  text-align: left;
}
.level {
  color: #9199a1;
  margin-bottom: 8px;
}

.price {
  color: #f01414;
}

.footer-java {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 0 8px;
}
</style>
